<template>
  <div class="a">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="学生姓名">
            <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="学生住址">
            <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
          </el-form-item>
          <el-form-item label="所在班级">
            <el-select v-model="studentSearch.cid" placeholder="所在班级">
              <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(page,pagesize,studentSearch)">搜索</el-button>
            <el-button type="success" plain icon="el-icon-circle-plus" @click="addStudent">添加</el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="students"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="编号"
          prop="sid"
          width="180"
        />
        <el-table-column
          label="姓名"
          prop="sname"
          width="180"
        />
        <el-table-column
          label="性别"
          prop="sex"
          width="180"
        />
        <el-table-column
          label="年龄"
          prop="age"
          width="180"
        />
        <el-table-column
          label="住址"
          prop="addr"
          width="180"
        />
        <el-table-column
          label="班级"
          prop="cname"
          width="180"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 6, 9]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <addOrUpdate v-if="componentVisible" ref="studEdit" @flushData="search(page,pagesize,studentSearch)"></addOrUpdate>
    </el-card>
  </div>
</template>

<script>
import { findStudents, findByPage, search } from '@/api/student'
// eslint-disable-next-line no-unused-vars
import { findClasses } from '@/api/classes'
// 调用组件（添加，修改，删除）
import addOrUpdate from "@/views/student/add_or_update"

export default {
  name: 'Index',
  data: function () {
    return {
      students: [],
      page: 1,
      pagesize: 3,
      total: 100, // 总记录数
      studentSearch: {}, // 搜索表单中的学生
      classes: [], // 查询班级\
      componentVisible: false,  // 组件的显示与隐藏
      multipleSelection:[],     // 多重选择勾选框
      sids:[],                  // 要删除学号
    }
  },
  // 调用组件
  components:{ addOrUpdate },
  created() {
    //  1、查询全部数据
    //   this.findAllStudents()
    // 2、分页查询
    // this.findByPage(this.page, this.pagesize)
    // 3、查询班级
    this.findClasses()
    // 4、条件查询带搜索
    this.search(this.page, this.pagesize, this.studentSearch)
  },
  methods: {
    // 编辑
    handleEdit(index, row) {
      // 子组件显示当前信息（点击的）
      this.componentVisible = true
      // 调用子组件的初始化方法进行初始化
      this.$nextTick(()=>{
        this.$refs.studEdit.init(row)
      })
    },
    // 删除
    handleDelete(index, row) {
      // 如果this.sids没有值就添加（有值就是修改）
      if(row){
        this.sids = [row.sid];
      }else{
        // 组织数据（删除一个或者多个都放在同一个数组中）
        this.sids = this.multipleSelection.map(m=>m.sid)
      }
      console.log("sids:",this.sids)
      let _this =this;
      this.$confirm(`是否要删除${this.sids}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行真正的删除操作
        delStud(this.sids).then((data)=>{
          if(data.code == 20000){
            this.$message({
              type: 'warning',
              message: data.message,
              onClose(){
                _this.search(_this.page,_this.pagesize,_this.studentSearch)
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除操作'
        })
      })
    },
    // 页的大小改变,就触发
    handleSizeChange(val) {
      this.pagesize = val
      this.findByPage(this.page, this.pagesize)
      console.log(`每页 ${val} 条`)
    },
    // 当前页改变时，触发
    handleCurrentChange(val) {
      this.page = val
      this.findByPage(this.page, this.pagesize)
      console.log(`当前页: ${val}`)
    },
    // 查询所有数据
    findAllStudents() {
      findStudents().then(({data}) => {
        // eslint-disable-next-line no-undef
        this.students = data.list
      })
    },
    // 分页查询
    findByPage(page, pagesize) {
      findByPage(page, pagesize).then(({data}) => {
        // 重新设置记录数
        this.total = data.pr.total
        console.log(data)
        // 设置每页数
        this.students = data.pr.rows
      })
    },
    // 查询班级
    findClasses() {
      findClasses().then(({data}) => {
        this.classes = data.list
      })
    },
    // 条件查询带分页
    search: function(page, pagesize, studentSearch) {
      search(page, pagesize, studentSearch).then(({data}) => {
        // 重新设置总记录数
        this.total = data.pr.total
        // 设置每页的数据
        this.students = data.pr.rows
      })
    },
    // 添加学生
    addStudent(){
      // 显示整个控件(true)
      this.componentVisible = true
      // 调用初始化方法
      this.$nextTick(()=>{
        this.$refs['studEdit'].init()
      })
    },
    // 点击复选框选择要删除数据（根据sid选）
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.box-card{
  margin: 30px;
}
  .el-pagination{
    text-align: right;
    margin-top: 30px;
  }
</style>
